import React from 'react'
import { Table, Modal } from 'antd'
import { productFindBypageApi } from '../../api/ajax'

const columns = [
  {
    title: '源产品名称',
    dataIndex: 'productName',
    key: 'id'
  }
]

class ProductSelect extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      visible: props.visible,
      totalRecord: 0,
      dataSource: [],
      selectedRowKeys: props.selectedRowKeys
    }
  }

  componentDidMount() {
    this.loadData()
  }
  loadData = () => {
    productFindBypageApi().then(v => {
      const {
        list: { results }
      } = v
      console.log(v, results)
      this.setState({ dataSource: results ? results : [] })
    })
  }
  render() {
    const { visible } = this.state

    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          'selectedRows: ',
          selectedRows
        )
        this.setState({
          selectedRowKeys: selectedRowKeys,
          selectedRows: selectedRows
        })
      },

      onSelectAll: (selected, selectedRows, changeRows) => {
        console.log(selected, selectedRows, changeRows)
      }
    }
    return (
      <Modal
        title={'选择'}
        visible={visible}
        onOk={() => {
          this.props.callback(this.state.selectedRows)
        }}
        onCancel={() => {
          this.props.callback()
          this.setState({ visible: false })
        }}
      >
        <Table
          dataSource={this.state.dataSource}
          columns={columns}
          rowSelection={rowSelection}
          rowKey={record => record.id}
        />
      </Modal>
    )
  }
}

export default ProductSelect
